<template>
  <div class="local-life">
    <c-title text="搜索"></c-title>
    <div class="head">
      <div class="flex-center" @click="toCityPage"><span class="city">{{ city_name }}</span><i
          class="iconfont icon-icon_down1"></i></div>
      <div class="input-box">
        <div class="flex-1 flex-center">
          <i class="iconfont icon-a-icon_pressed"></i>
          <input type="text" placeholder="请输入搜索关键词" v-model="keywords" />
        </div>
        <span class="search" @click="search">搜索</span>
      </div>
    </div>
    <div class="box">
      <div class="category-name" @click="nav_flag = !nav_flag">{{ category_name }}</div>
      <div class="box-head">
        <div class="distance" :class="{ 'main-color': limit_1km }" @click="distance">附近1km</div>
        <span class="change"
          :class="sort_by == 1 && parms[1].order_by == 1 ? 'up' : sort_by == 1 && parms[1].order_by == 2 ? 'down' : ''"
          @click="change(1)">距离</span>
        <span class="change"
          :class="sort_by == 2 && parms[2].order_by == 1 ? 'up' : sort_by == 2 && parms[2].order_by == 2 ? 'down' : ''"
          @click="change(2)">销量</span>
        <span class="change"
          :class="sort_by == 3 && parms[3].order_by == 1 ? 'up' : sort_by == 3 && parms[3].order_by == 2 ? 'down' : ''"
          @click="change(3)">价格</span>
      </div>
      <div class="category-nav" v-if="nav_flag" :class="second_list.length == 0 ? 'bg-fff' : ''">
        <div class="nav-left">
          <div class="first-category"
            :class="index == first_index ? 'current-category' : first_index - 1 == index ? 'current-category-left' : first_index + 1 == index ? 'current-category-right' : ''"
            v-for="(item, index) in category_list" :key="index" @click="toggle(item, index, 2)"><span>{{ item.name
              }}</span></div>
        </div>
        <div class="nav-center" :class="second_list.length == 0 ? 'bg-F9F9F9' : ''">
          <div class="second-category" :class="{ 'current-category': index === second_index }"
            v-for="(item, index) in second_list" @click="toggle(item, index, 3)">{{ item.name }}</div>
        </div>
        <div class="nav-right" :class="three_list.length == 0 ? 'bg-F9F9F9' : ''">
          <div v-if="three_list && three_list.length !== 0" class="second-category"
            :class="{ 'current': index === three_index }" v-for="(item, index) in three_list"
            @click="toggle(item, index, 4)">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div v-if="list && list.length !== 0">
      <Waterfall :list="list" :breakpoints="breakpoints" backgroundColor="#f5f5f5" :loadProps='loadProps' delay="800">
        <template #item="{ item }">
          <div class="li" :key="item.id" @click="goods(item.id)">
            <div class="top">
              <img :src="item.thumb" />
              <!-- <LazyImg v-if="item.thumb" :url="item.thumb"></LazyImg> -->
            </div>
            <div class="bottom">
              <div class="title">{{ item.title }}</div>
              <div class="goods-desc">
                <span v-if="item.distance">{{ item.distance }}</span>
                <span>已售{{ item.show_sales  + item.virtual_sales }}</span>
              </div>
              <div class="price">
                <div class="current-price">
                  <span class="fz-26" style="margin-right: .1563rem;">¥</span>
                  <span class="fz-34">{{ item.price }}</span>
                </div>
                <div class="original-price">¥{{ item.market_price }}</div>
                <div class="discount">{{ item.discount }}
                </div>
              </div>
              <div class="seckill-info" v-if="item.sale_end_at">
                <span class="seckill-info-txt">限时购</span>
                <img :src="imgHost + '/static/local/local-life/miaoshabeijing.png'" alt="">
                <van-count-down v-if="item.sale_start_at > now" :time="fun.getTimeDifference(item.sale_start_at)"
                  format="DD 天 HH 时 mm 分 ss 秒">
                  <template #default="timeData">
                    <span class="date" v-if="timeData.days > 0">{{ timeData.days }}天</span>
                    <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
                            }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds
                                }}</span>
                  </template>
                </van-count-down>
                <van-count-down v-else :time="fun.getTimeDifference(item.sale_end_at)" format="DD 天 HH 时 mm 分 ss 秒">
                  <template #default="timeData">
                    <span class="date" v-if="timeData.days > 0">{{ timeData.days }}天</span>
                    <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes : timeData.minutes
                            }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds
                                }}</span>
                  </template>
                </van-count-down>
              </div>

              <div class="flex-center" style="margin-top: 0.4375rem;" v-if="item.coupon">
                <span class="tips">券</span>
                <span class="receive">{{ item.coupon }}</span>
              </div>
            </div>

          </div>
        </template>
      </Waterfall>
    </div>
    <div v-else>
      <van-empty description="暂无内容" />
    </div>
  </div>
</template>

<script>
import { Waterfall, LazyImg } from "vue-waterfall-plugin";
import "vue-waterfall-plugin/dist/style.css";
import { scrollMixin } from "../../utils/mixin";
import loading from 'assets/images/img_default.png';
export default {
  components: { Waterfall, LazyImg },
  mixins: [scrollMixin],
  data() {
    return {
      first_cate_id: "",
      second_cate_id: "",
      third_cate_id: "",
      page: 1,
      total_page: 1,
      isLoadMore: true,
      imgHost: window.location.origin,
      breakpoints: {
        1200: {
          //当屏幕宽度小于等于1200
          rowPerView: 4
        },
        800: {
          //当屏幕宽度小于等于800
          rowPerView: 3
        },
        500: {
          //当屏幕宽度小于等于500
          rowPerView: 2
        }
      },
      loadProps: {
        loading: loading,
        error: loading
      },
      list: [],
      point: {},
      citycode: 0,
      parms: {
        1: { sort_by: 1, order_by: 0 },
        2: { sort_by: 2, order_by: 0 },
        3: { sort_by: 3, order_by: 0 }
      },
      cursor: 1,
      sort_by: 0,
      city_name: "定位",
      category_list: [],
      second_list: [],
      three_list: [],
      first_index: null,
      category_name: "全部分类",
      nav_flag: false,
      keywords: "",
      second_index: "",
      three_index: "",
      search_type: 0,
      limit_1km: 0,
      now: 0,
      cate_level:2
    };
  },
  activated() {
    this.now = Math.floor(Date.now() / 1000);// 获取不包含毫秒的当前时间戳
    this.init_list();
    let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
    if (!myLoaction) {
      this.fun
        .getLocation()
        .then((res) => {
          this.city_name = res.city;
          this.point = res.point;
          this.citycode = myLoaction.addressComponent.adcode || '';
          localStorage.setItem('local_life_code', myLoaction.addressComponent.adcode)
          this.getData();
        })
        .catch(err => {
          console.log(err);
          this.getData();
        });
    } else {
      if (localStorage.getItem('local_life_code') && this.$route.query.city) {//城市选择器页进入
        let citycode = localStorage.getItem('local_life_code') || myLoaction && myLoaction.addressComponent.adcode;
        this.citycode = citycode;
        this.city_name = this.$route.query.city;
        this.point = myLoaction ? myLoaction.point : {};
        this.getData();
      } else {
        this.city_name = myLoaction.city;
        this.point = myLoaction.point;
        this.citycode = myLoaction.addressComponent.adcode || '';
        localStorage.setItem('local_life_code', myLoaction.addressComponent.adcode)
        this.getData();
      }
    }



  },

  mounted() {
    this.init();
    if (this.$route.query.category_id) {
      let category_id = this.$route.query.category_id;
      this.first_index = category_id * 1;
      this.three_list = [];
      this.three_index = "";
      this.second_index = "";
    }
    if (this.$route.query.path) {
      this.three_list = [];
      this.three_index = "";
      this.second_list = [];
      this.first_index = "";
      this.second_index = "";
    }
    this.getCategory();

  },

  methods: {
    init_list() {
      this.list = [];
      this.isLoadMore = true;
      this.nav_flag = false;
      if (this.$route.query.category_id) {
        this.first_cate_id =this.$route.query.category_id * 1;
      }
    },
    init() {
      this.sort_by = 0;
      this.point = {};
      this.parms = {
        1: { sort_by: 1, order_by: 0 },
        2: { sort_by: 2, order_by: 0 },
        3: { sort_by: 3, order_by: 0 }
      };
    },

    toCityPage() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "local_life", path: "search" }))
    },
    getCategory(level = 1, id = "") {
      let json = {};
      if (level !== 1 && id !== '') {
        json.parent_id = id;
      }
      $http.get("plugin.local-life.api.category.index", json, '').then(res => {
        if (res.result) {
          this.cate_level = res.data.cate_level;
          let data = res.data.cate;
          if (level == 1) {
            this.category_list = data;
            if (data.length !== 0 && this.$route.query.category_id) {
              let index = data.findIndex(item => item.id == this.$route.query.category_id);
              this.first_index = index;
              this.category_name = data[index].name;
              this.getCategory(level = 2, data[index].id);
            }
          } else if (level == 2) {
 
            if (data.length == 0) {
              this.list = [];
              this.nav_flag = false;
              this.getData();
            } else {
              this.second_list = data;
            }
          } else if (level == 3) {
            if (data.length == 0) {
              this.nav_flag = false;
              this.list = [];
              this.getData();
            } else {
              this.three_list = data;
            }
          }
        } else {
          this.$toast(res.msg);
        }
      })
    },
    goods(goods_id) {
      this.$router.push(this.fun.getUrl("local_life_goods", { goods_id }, {}))
    },
    toggle(data, index, level) {
      console.log(level,'====');
      if (level == 2) {
        this.first_cate_id = data.id;
      } else if (level == 3) {
        this.second_cate_id = data.id;
      } else {
        this.third_cate_id = data.id;

      }
      if (level !== 4) {
        if (level == 2) {
          this.category_name = data.name;
          this.first_index = index;
          this.second_index = '';
        } else {
          this.three_index = "";
          this.second_index = index;
        }
        if(level==3&&this.cate_level == 2){
            this.getData();
            this.nav_flag = false;
            this.list = [];
            return;
        }
        this.getCategory(level, data.id);
      } else {
        this.category_name = data.name;
        this.list = [];
        this.three_index = index;
        this.getData();
        this.nav_flag = false;
      }
    },

    change(type) {
      this.list = [];
      let order_by = '';
      if (this.parms[type].order_by == 0) {
        order_by = 1;
      } else if (this.parms[type].order_by == 1 && type == this.sort_by) {
        order_by = 2;
      } else {
        order_by = 1;
      }
      this.search_type = type + 1;
      this.parms[type].order_by = order_by;
      this.sort_by = type;
      this.getData();
    },
    search() {
      this.list = [];
      this.getData();
    },
    distance() {
      this.search_type = 1;
      this.limit_1km = this.limit_1km == 1 ? 0 : 1;
      this.list = [];
      this.getData();
    },
    getData(page = 1) {
      let json = { limit_1km: this.limit_1km }
      if (this.search_type && this.search_type !== 1) {
        let order_by = this.parms[this.sort_by].order_by;
        json.search_direct = order_by == 1 ? 'asc' : 'desc';
      }
      if (this.keywords) {
        json.keyword = this.keywords;
      }
      if (this.search_type) {
        json.search_type = this.search_type;
      }
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      if (this.point.lat || (myLoaction && this.city_name == myLoaction.city)) {
        let latitude = '';
        let longitude = '';
        if (this.city_name == myLoaction.city) {
          latitude = myLoaction.point.lat * 1;
          longitude = myLoaction.point.lng * 1;
        } else {
          latitude = this.point.lat * 1;
          longitude = this.point.lng * 1;
        }
        json.latitude = latitude;
        json.longitude = longitude;
      }
      if(this.first_cate_id){
        json.first_cate_id = this.first_cate_id
      }
      if(this.second_cate_id){
        json.second_cate_id = this.second_cate_id

      }
      if(this.third_cate_id){
        json.third_cate_id = this.third_cate_id
      }
      if (this.citycode) {
        let city_id = (this.$route.query.city ? localStorage.getItem('local_life_code') : this.citycode) + '';
        let _city = city_id.slice(0,-2) + '00';//市的city_id
        json.city_id = _city
      }

      let _json = {
        page, 
        'search': json
      }
      $http.post("plugin.local-life.api.goods.index", _json, '.').then(res => {
        this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          this.page = data.current_page;
          this.total_page = data.last_page;
          if (data.data && data.data.length !== 0) {
            this.list = this.list.concat(data.data);
          }
        } else {
          this.$toast(res.msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);

    },
  }
};
</script>

<style scoped lang='scss'>
::v-deep .van-count-down {
  font-weight: 500;
  font-size: 0.6875rem;
  color: #F15353;
  flex: 1;
  padding-right: 0.2813rem;
  line-height: unset;
}

.up::after {
  border-bottom: .25rem solid var(--themeBaseColor) !important;
}

.down::before {
  border-top: .25rem solid var(--themeBaseColor) !important;
}

.bg-fff {
  background-color: #fff !important;
}

.li {
  border-radius: 0.5rem;
  width: 100%;
  background-color: #fff;
  padding-bottom: .6563rem;
  margin-bottom: 0.375rem;
  overflow: hidden;
  box-sizing: border-box;

  .receive {
    font-weight: 400;
    font-size: 0.75rem;
    color: #F15353;
  }

  .tips {
    width: 0.9375rem;
    height: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(91deg, rgba(255, 38, 60, 0.1) 0%, rgba(255, 116, 9, 0.1) 100%);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 38, 60, 0.3);
    font-weight: 500;
    font-size: 0.6875rem;
    color: #F15353;
    margin-right: .1563rem;
  }

  .fz-26 {
    font-size: .8125rem;
  }

  .fz-34 {
    font-size: 1.0625rem;
  }

  .current-price {
    display: flex;
    color: #F15353;
    font-weight: bold;
    align-items: baseline;
  }

  .original-price {
    font-weight: 400;
    font-size: 0.6875rem;
    color: #6E6E79;
    text-decoration-line: line-through;
    margin-left: .1875rem;
    margin-right: .3125rem;
  }

  .discount {
    font-weight: 400;
    flex-shrink: 0;
    font-size: 0.6875rem;
    color:#F15353;
  }

  .top {
    margin: 0;
    padding: 0;
    width: 10.7813rem;

    img {
      max-height: 14.375rem;
      width: 100%;
      overflow: hidden;
      margin: 0;
      display: block;
    }

    .mic-content {
      margin: 0.375rem;
      padding: 0.75rem;
      background-color: #f6f6f6;
      font-size: 0.8125rem;
      color: #3b3b4a;
      line-height: 18px;
      min-height: 48px;
      border-radius: 0.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }
  }

  .bottom {
    padding: 0 .625rem;

    .price {
      display: flex;
      align-items: center;
      line-height: 1;
    }

    .title {
      font-weight: 600;
      margin: .6563rem 0 .5625rem;
      font-size: 0.875rem;
      line-height: 1rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #00001c;
      text-align: left;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: left;
    }

    .goods-desc {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: .2813rem;
      line-height: 1;

      span {
        flex-shrink: 0;
        margin-right: .3125rem;
        font-weight: 400;
        font-size: 0.6875rem;
        color: #6E6E79;
      }
    }


  }
}

.local-life {
  .main-color {
    color: #F15353 !important;
  }

  .seckill-info {
    display: flex;
    width: max-content;
    height: 1.125rem;
    line-height: 1.125rem;
    border-radius: 0.25rem;
    background-color: #FEEDED;
    position: relative;
    margin-top: .4063rem;

    &-txt {
      z-index: 10;
      position: absolute;
      font-weight: bold;
      font-size: 0.6875rem;
      color: #FFFFFF;
      left: 0.4063rem;
      line-height: 1;
      top: .1875rem;
    }

    img {
      width: 3.4063rem;
      margin: 0;
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .distance {
    margin-right: 1.5625rem;
  }


  .box-head {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 0.875rem;
    color: #6E6E79;

    .change {
      line-height: 1;
      position: relative;
      padding-right: 0.65rem;
      margin-right: 1.4688rem;
    }

    span:last-child {
      margin-right: 0;
    }

    .change::after {
      position: absolute;
      content: "";
      right: 0;
      top: -0.1rem;
      width: 0;
      height: 0;
      border-top: .25rem solid transparent;
      border-left: .25rem solid transparent;
      border-right: .25rem solid transparent;
      border-bottom: .25rem solid #AAAAB3;
    }

    .change::before {
      position: absolute;
      content: "";
      right: 0;
      bottom: -0.1rem;
      width: 0;
      height: 0;
      border-top: .25rem solid #AAAAB3;
      border-left: .25rem solid transparent;
      border-right: .25rem solid transparent;
      border-bottom: .25rem solid transparent;
    }
  }

  .box {
    padding: .9375rem 0.75rem .625rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    position: relative;
  }

  .category-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5625rem;
    background-color: #F3F3F3;
    height: 30.5938rem;
    border-radius: 0px 0px 0.75rem 0.75rem;
    overflow: hidden;
    z-index: 10;
    display: flex;
  }

  .current-category {
    color: var(--themeBaseColor) !important;
    background-color: #F9F9F9 !important;
  }

  .current {
    color: var(--themeBaseColor) !important;
  }

  /* 为当前元素的左侧兄弟元素设置样式 */
  .current-category-left {
    border-radius: 0 0 0.75rem 0;
    // overflow: hidden;
    position: relative;

    span {
      position: relative;
      z-index: 5;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 0 0 0.625rem 0;
    }

    &::after {
      position: absolute;
      content: "";
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #F9F9F9;
    }
  }

  /* 为当前元素的右侧兄弟元素设置不同的样式 */
  .current-category-right {
    border-radius: 0 0.75rem 0 0;
    overflow: hidden;
  }


  .nav-center {
    width: 7.6563rem;
    height: 100%;
    overflow-y: auto;
    background-color: #F9F9F9;
  }

  .nav-left {
    width: 5.625rem;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
  }

  .bg-F9F9F9 {
    background-color: #F9F9F9 !important;
  }

  .nav-right {
    width: calc(100% - 5.625rem - 7.6563rem);
    height: 100%;
    overflow-y: auto;
    background: #F3F3F3;
  }

  .first-category,
  .second-category {
    height: 2.5rem;
    line-height: 2.5rem;
    font-weight: 400;
    font-size: 0.875rem;
    color: #3B3B4A;
  }

  .category-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
    position: relative;
    padding-right: 0.65rem;
  }

  .category-name::before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-25%);
    width: 0;
    height: 0;
    border-top: .25rem solid #AAAAB3;
    border-left: .25rem solid transparent;
    border-right: .25rem solid transparent;
    border-bottom: .25rem solid transparent;
  }


  .search {
    width: 3.125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    margin: .1875rem;
    text-align: center;
    color: #fff;
    background: var(--themeBaseColor);
    border-radius: 1.125rem;
    font-weight: 400;
    font-size: 0.8125rem;
  }

  .icon-a-icon_pressed {
    margin-left: .75rem;
    margin-right: .3125rem;
  }

  .flex-1 {
    flex: 1;
  }

  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1.0938rem;
    border: 0.0625rem solid var(--themeBaseColor);
    flex: 1;

    input {
      flex: 1;
      border: none;
      font-size: 0.8125rem;
    }

    input::-webkit-placeholder {
      font-weight: 400;
      font-size: 0.8125rem;
      color: #999999;
    }
  }

  .icon-icon_down1 {
    color: #00001C;
    font-size: 0.625rem;
    margin-left: 0.3125rem;
    margin-right: .5313rem;
  }

  .city {
    font-weight: 500;
    font-size: 0.875rem;
    color: #00001C;
    line-height: 1;
  }

  .head {
    display: flex;
    align-items: center;
    padding: 0.5rem .75rem 0.0313rem .875rem;
  }
}

/** **/
</style>